<template>
	<view class="work-container">
		<uni-section :title="$t('control:surveillance')" type="line"></uni-section>
		<view class="grid-body">
			<uni-grid :column="4" :showBorder="false">
				<uni-grid-item>
					<view class="grid-item-box" @click="changeGrid">
						<uni-icons type="person-filled" size="30"></uni-icons>
						<text class="text">{{ $t('control:realtimeSurveillanceAdd') }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="staff-filled" size="30"></uni-icons>
						<text class="text">{{ $t('control:roleManagement') }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="color" size="30"></uni-icons>
						<text class="text">{{ $t('control:menuManagement') }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="settings-filled" size="30"></uni-icons>
						<text class="text">{{ $t('control:departmentManagement') }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="heart-filled" size="30"></uni-icons>
						<text class="text">{{ $t('control:postManagement') }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="bars" size="30"></uni-icons>
						<text class="text">{{ $t('control:dictionaryManagement') }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="gear-filled" size="30"></uni-icons>
						<text class="text">{{ $t('control:parameterSettings') }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="chat-filled" size="30"></uni-icons>
						<text class="text">{{ $t('control:noticeAnnouncement') }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="gotoPage(1)">
						<uni-icons type="wallet-filled" size="30"></uni-icons>
						<text class="text">{{ $t('control:mapManagement') }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="gotoPage(0)">
						<uni-icons type="wallet-filled" size="30"></uni-icons>
						<text class="text">{{ $t('control:imageManagement') }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			current: 0,
			swiperDotIndex: 0,
			data: [
				{ image: '/static/images/banner/banner01.jpg' },
				{ image: '/static/images/banner/banner02.jpg' },
				{ image: '/static/images/banner/banner03.jpg' }
			]
		}
	},
	methods: {
		clickBannerItem(item) {
			console.info(item)
		},
		changeSwiper(e) {
			this.current = e.detail.current
		},
		changeGrid(e) {
			uni.navigateTo({
				url: "/pages/control/listAdd/index"
			})
		},
		gotoPage(e) {
			if (e == 0) {
				this.$tab.navigateTo('/pages/work/equipment/index')
			}
			if (e == 1) {
				this.$tab.navigateTo('/pages/work/equipment/index2')
			}
		}
	}
}
</script>

<style lang="scss">
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

.text {
	text-align: center;
	font-size: 26rpx;
	margin-top: 10rpx;
}

.grid-item-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
	;
}

.swiper {
	height: 300rpx;
}

.swiper-box {
	height: 150px;
}

.swiper-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	height: 300rpx;
	line-height: 300rpx;
}

@media screen and (min-width: 500px) {
	.uni-swiper-dot-box {
		width: 400px;
		margin: 0 auto;
		margin-top: 8px;
	}

	.image {
		width: 100%;
	}
}
</style>
